<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		ul{
			list-style: none;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul class="list">
			<li>日期：
				<span id="nian"></span>年
				<span id="yue"></span>月
				<span id="day"></span>日
			</li>
			<li>农历：<span></span></li>
			<li>星期：<span></span></li>
			<li>宜：<span></span></li>
			<li>忌：<span></span></li>
		</ul>
	</div>
	<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myDate = new Date;
		var n = myDate.getFullYear();
		var y = myDate.getMonth()+1;
		var r = myDate.getDate();
		var nian = document.querySelector("#nian");
		nian.innerHTML=n;
		var yue = document.querySelector("#yue");
		yue.innerHTML=y;
		var day = document.querySelector("#day");
		day.innerHTML=r;
		$(".list li:eq(3) span").css({color:'green'});
		$(".list li:eq(4) span").css({color:'red'});
		$.ajax({
			type:'get',
			url:'http://v.juhe.cn/calendar/day',
			dataType: 'jsonp',
			data:{
				'date':''+n+'-'+y+'-'+r+'',
				'key':'f3407698eb45b716d7dc32f6c36968e9',
			},
			success:function(d,s,x){
				$(".list li:eq(1) span").html(d.result.data.lunar);
				$(".list li:eq(2) span").html(d.result.data.weekday);
				$(".list li:eq(3) span").html(d.result.data.avoid);
				$(".list li:eq(4) span").html(d.result.data.suit);
			}
		});
	</script>
</body>
</html>